.tabbar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
	&-item{
    height: 70rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: center;
    position: relative;
    text{
      color: #404040;
      font-size: 24rpx;
      transition: all 300ms;
    }
    &--active{
      text{
        color: #202020;
        font-size: 36rpx;
      }
      .tabbar-item__line{
        opacity: 1;
      }
      .tabbar-item__badge{
        transform: scale(1);
        margin-left: 50rpx;
        margin-top: -20rpx;
      }
    }
    &__line{
      width: 48rpx;
      height: 1px;
      background-color: #3d85db;
      border-radius: 1px;
      position: absolute;
      bottom: 0;
      opacity: 0;
      transition: opacity 300ms;
    }
    &__badge{
      width: 40rpx;
      height: 40rpx;
      background-color: #ff0000;
      border-radius: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: absolute;
      transform: scale(.9);
      margin-left: 30rpx;
      margin-top: -12rpx;
      transition: all 300ms;
      
      text{
        transform: scale(.8);
        color: #ffffff;
        font-size: 30rpx;
      }
    }
  }

}